<template>
	<view>
		<!-- 选项卡 -->
		<view class="nav">
			<view :class="order_status == item.value ? 'navItem navItem_active' : 'navItem'" v-for="(item,index) in navList" :key="index"
			 @click="changeNav(item.value)">{{ item.name }}</view>
		</view>
		<view style="height: 100upx;"></view>
		<navigator :url="'orderdetails?order_no='+item.order_no" class="item" v-for="(item,index) in orderlist" :key="index">
			<view class="item-row1">
				<view class="item-row1-left">
					<view class="ordernum">订单号{{item.order_no}}</view>
					<view class="time">{{item.update_time}}</view>
				</view>
				<view class="item-row1-right">{{item.order_status_text}}</view>
			</view>
			<view class="item-row2" v-for="(val,k) in item.sublist" :key="k">
				<view class="item-row2-img" :style="'background: url('+val.images_url+') center center; background-size: cover;'">
					<!-- <image src="https://teacher-obj.oss-cn-beijing.aliyuncs.com/headportrait/201908/13/e89843afeb1235c32a3c9e3f17aced55110.jpg" mode="aspectFit"></image> -->
				</view>
				<view class="item-text">
					<view class="item-text-title">{{val.goods_name}}</view>
					
					<text class="item-text-spec">{{val.specs_name}}</text>
					<view class="item-text-num">
						<view class="money"><text>{{val.score}}</text>积分+￥{{val.price}}</view>
						<view class="num">X{{val.number}}</view>
					</view>
				</view>
			</view>
			<view class="item-row3">
				<view class="item-row3-money" >实付金额 <text>￥{{item.total_price}}</text></view>
				<view class="item-row3-num">支付积分<text>{{item.total_score}}积分</text></view>
				<!-- <view class="item-row3-text">共一件商品</view> -->
			</view>
		</navigator>
		<view style="height: 150upx;"></view>
		<uni-load-more v-if="orderlist.length >= 6" :status="status" :content-text="contentText" />
		
		<view class="tishi" v-if="orderlist.length==0">
			<i class="iconfont iconmeishuju "></i>
			<view>暂无订单</view>
		</view>
		
		<!-- 底部 -->
		<my-bottom :buttomIndex="1"></my-bottom>
	</view>
</template>

<script>
	import myBottom from './components/bottom.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default{
		components: {
			myBottom
		},
		data() {
			return {
				market_id: uni.getStorageSync('market_id'), //所属上级ID
				navList: [{name:'未支付',value:0},{name:'已支付',value:1},{name:'已发货',value:2},{name:'已完成',value:3},{name:'已退款',value:99}],
				navIndex: 0,
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: '没数据'
				},
				orderlist:[],
				order_status:0
			}
		},
		onLoad(e) {
			
		},
		onShow() {
			this.page = 1;
			this.reload = true;
			this.orderlist = [];
			this.getorderlist();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.reload = true;
			this.orderlist = [];
			this.getorderlist();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getorderlist();
			}, 500);
		},
		methods: {
			changeNav:function(order_status){
				this.order_status=order_status;
				this.page = 1;
				this.reload = true;
				this.orderlist = [];
				this.getorderlist();
			},
			getorderlist:function() {
				var data = {
					order_status:this.order_status,
					limit:8,
					page:this.page
				}
				this.$sapi.apiPost('v1/' + this.market_id + '/mobile/order/infos',data).then(res => {
					if(res.data.code==200){
						var list = res.data.data.list;
						list.forEach((item,key)=>{
							var text='';
							switch (item.order_status){
								case 0:
									text ="未支付";
									break;
								case 1:
									text ="已支付";
									break;
								case 2:
									text ="已发货";
									break;
								case 3:
									text ="已完成";
									break;
								case 99:
									text ="已退款";
									break;
							}
							item['order_status_text']= text;
						})	
						this.orderlist = this.reload ? list : this.orderlist.concat(list);
						this.reload = false;
						this.status = 'more';
					}else{
						if (this.reload) {
							this.orderlist = [];
						} else {
							this.status = 'noMore';
						}
					}
				});
			}
		}
		
	}
</script>

<style lang="less">
	page{
		background-color: #F7F7F7;
	}
	.nav{
		background-color: #F7F7F7;
		position: fixed;
		left: 0;
		padding: 20upx 30upx;
		display: flex;
		align-items: center;
		white-space: nowrap;
		overflow: auto;
		z-index: 9999;
		/* #ifdef APP-PLUS */
		top: 0upx;
		/* #endif */
		/* #ifdef H5 */
		top: 88upx;
		/* #endif */
		.navItem {
			position: relative;
			padding-right: 52upx;
			font-size: 32upx;
			color: #666666;
		}
		.navItem_active {
			color: #FF9900;
			font-size: 36upx;
			font-weight: bold;
		}
	}
	
	.item{
		width: 694upx;
		border-radius: 20upx;
		margin: auto;
		background: #FFFFFF;
		margin-top: 20upx;
		
		.item-row1{
			display: flex;
			justify-content: space-between;
			padding: 15upx 15upx 10upx 15upx;
			border-bottom: 1upx solid #F7F7F7;
			.item-row1-left{
				.ordernum{
					font-size: 26upx;
					color: #333333;
					line-height: 35upx;
				}
				.time{
					font-size: 24upx;
					color: #A8A8A8;
					line-height: 35upx;
				}
			}
			.item-row1-right{
					color: #333333;
					font-size: 26upx;
					line-height: 35upx;
			}
		}
		.item-row2{
			display: flex;
			justify-content: flex-start;
			padding:20upx;
			border-bottom: 1upx solid #F7F7F7;
			.item-row2-img{
				width: 128upx;
				height: 128upx;
				border: 2upx solid #A8A8A8;
				border-radius: 8upx;
				margin-right: 20upx;
				image{
					width: 100%;
					height: 100%;
					
				}
			}
			.item-text{
				width: 100%;
				.item-text-title{
					color: #2D3440;
					font-size: 28upx;
				}
				.item-text-spec{
					width: auto;
					background-color: #DADFE6;
					color: #FFFFFF;
					padding:5upx 10upx;
					border-radius: 15upx;
				}
				.item-text-num{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.money{
						color: #FF0032;
						font-size: 28upx;
						text{
							font-size: 40upx;
						}
						}
					.num{
						color: #2D3440;
						font-size: 20upx;
						}
				}
			}
		}
		.item-row3{
			padding:0upx 20upx 20upx 20upx;
			.item-row3-money{
				font-size: 26upx;
				color: #333333;
				text{
					color: #FF0000;
					margin-left: 10upx;
				}
			}
			.item-row3-num{
				font-size: 26upx;
				color: #333333;
				text{
					color: #FF0000;
					margin-left: 10upx;
				}
			}
			.item-row3-text{
				color: #A8A8A8;
				font-size: 24upx;
			}
		}
	}
	
	.tishi {
		padding-top: 300upx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		view{
			color: #FF9900;
		}
	
	}
	
	.tishi i {
		font-size: 380upx;
		color: #FF9900;
		line-height: 180upx;
	}
</style>
